<script setup lang="ts">
import dayjs from "dayjs";
import axios from "axios";
// import MdEditor from "md-editor-v3";
// import Bar from "./components/Bar.vue";
// import Pie from "./components/Pie.vue";
// import Line from "./components/Line.vue";
// import TypeIt from "@/components/ReTypeit";
import { ref, computed, markRaw } from "vue";
// import Github from "./components/Github.vue";
// import { randomColor } from "@pureadmin/utils";
// import { useRenderFlicker } from "@/components/ReFlicker";

defineOptions({
  name: "Welcome"
});

const list = ref();
const loading = ref<boolean>(true);
const titleClass = computed(() => {
  return ["text-base", "font-medium"];
});

setTimeout(() => {
  loading.value = !loading.value;
}, 800);

// axios
//   .get("https://api.github.com/repos/pure-admin/vue-pure-admin/releases")
//   .then(res => {
//     list.value = res.data.map(v => {
//       return {
//         content: v.body,
//         timestamp: dayjs(v.published_at).format("YYYY/MM/DD hh:mm:ss A"),
//         icon: markRaw(
//           useRenderFlicker({
//             background: randomColor({ type: "hex" }) as string
//           })
//         )
//       };
//     });
//   });
</script>

<template>
  <div>
    <el-row :gutter="24">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="10"
        :xl="10"
        class="mb-[18px]"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never" class="card-box" />
        <el-card shadow="never" />
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="14"
        :xl="14"
        class="mb-[18px]"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <!-- <template #header />
                                    <el-skeleton animated :rows="7" :loading="loading">
                                      <template #default />
                                    </el-skeleton> -->
        </el-card>
        <el-card shadow="never">
          <!-- <template #header /> -->
          <!-- <el-skeleton animated :rows="7" :loading="loading">
                                      <template #default />
                                    </el-skeleton> -->
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <el-card shadow="never">
          <template #header> <span class="cardTitle">公司新闻</span></template>
          <div class="flex justify-center items-center py-[40px]">
            <div>
              <img src="@/assets/default-drawing/png6.png" alt="" />
              <p class="text-center text-gray-400">功能建设中~</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <el-card shadow="never">
          <template #header> <span class="cardTitle">日程安排</span></template>
          <div class="flex justify-center items-center py-[40px]">
            <div>
              <img src="@/assets/default-drawing/png6.png" alt="" />
              <p class="text-center text-gray-400">功能建设中 ~</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

:deep(.el-card__header) {
  border-bottom: 0;
}

.main-content {
  margin: 20px 20px 0 20px !important;
}

.card-box {
  background-image: url(@/assets/welcome/card-bg.png);
  height: 357px;
  width: 100%;
}

.cardTitle {
  font-size: 16px;
  // font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 24px;
}
</style>
